﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>插入地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<style type="text/css">
*{color: #000000;font-size:10pt}
body{
	margin:0px
}
.content{
	width:520px;margin:auto
}

#content{
	width:520px;height:50px
}

.cityList{height: 320px;width:372px;overflow-y:auto;}
.sel_container{position:absolute;top:3px;font-size:12px;}
.map_popup {position: absolute;z-index: 200000;width: 382px;height: 344px;top:20px;}
.map_popup .popup_main { background:#fff;border: 1px solid #8BA4D8;height: 100%;overflow: hidden;position: absolute;width: 100%;z-index: 2;}
.map_popup .title {background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
color: #6688CC;font-size: 12px;font-weight: bold;height: 24px;line-height: 25px;padding-left: 7px;}
.map_popup button {background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
border: 0 none;cursor: pointer;height: 12px;position: absolute;right: 4px;top: 6px;width: 12px;}	

.content table{padding:0px;margin:0px;width: 100%}
.content table tr{padding:0px;margin:0px; list-style: none;height: 30px; line-height: 30px;}
#city,#address{height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0px; margin: 0px; line-height: 21px;}
#city{width:90px}
#address{width:220px}
</style>

</head>
<body>
 
<div class="content">

	<table>
	 
		<tr>
			<td>城市:</td>
			<td style="width:120px">
				<div class="sel_container"><strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div>
				<div class="map_popup" id="cityList" style="display:none;">
				    <div class="popup_main">
				        <div class="title">城市列表</div>
						<div class="cityList" id="citylist_container"></div>
				        <button id="popup_close"></button>
				    </div>
				</div>
				<input id="city" type="hidden" value="北京市" />
			</td>
			<td>地址:</td>
			<td><input id="address" type="text" value="" /></td>
			<td><input type="button" onclick="javascript:doSearch()" value="搜索定位" /></td>
		</tr>
	 
	</table>
	
	<div style="width:520px;height:340px;border:1px solid gray;margin:auto" id="container">
	</div>
	<p>地图尺寸
		<input type="radio" name="mapsize" value="320,260" onclick="__changemapsize(this);">(320 x 260)
		<input type="radio" name="mapsize" value="520,320" onclick="__changemapsize(this);" checked="checked">(520 x 320)
		<input type="radio" name="mapsize" value="760,580" onclick="__changemapsize(this);">(760 x 580)
	</p>
	<p>锚点窗体文字(支持HTML代码)</p>
	<textarea id="content" onkeyup="javascript:__updateinfowindow();"></textarea>
	<p style="text-align:center">
		<input value="确定插入地图" onclick="javascript:__button_ok_onclick();" type="button" />
	</p>

</div>
	
<script type="text/javascript">
    var map = new BMap.Map("container");      //设置卫星图为底图
    //var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});	//3D地图
   // map.setCurrentCity("江门");
    var marker,point,imgcss;
	map.enableScrollWheelZoom();
	map.enableContinuousZoom();
    map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
    map.enableAutoResize();
    function doSearch(){
        if (!document.getElementById('city').value) {
            alert('请输入城市!');
            return;
        }
        var search = new BMap.LocalSearch(document.getElementById('city').value, {
            onSearchComplete: function (results){
            	map.setCurrentCity(document.getElementById("city").value); 
                if (results && results.getNumPois()) {
                    var points = [];
                    for (var i=0; i<results.getCurrentNumPois(); i++) {
                        points.push(results.getPoi(i).point);
                    }
                    if (points.length > 1) {
                        map.setViewport(points);
                    } else {
                        map.centerAndZoom(points[0], 13);
                    }
                    point = map.getCenter();
                    marker.setPosition(point);
                } else {
                    alert('无法定位到该地址！');
                }
            }
        });
        search.search(document.getElementById('address').value || document.getElementById('city').value);
    }
    //获得参数
    function getPars(str,par){
        var reg = new RegExp(par+"=((\\d+|[.,])*)","g");
        return reg.exec(str)[1];
    }
    function init(){
		point = new BMap.Point(116.404, 39.915);    // 创建点坐标
		map.centerAndZoom(point, 10);                     // 初始化地图,设置中心点坐标和地图级别。
        
		marker = new BMap.Marker(point);
        marker.enableDragging();
        map.addOverlay(marker);
        map.addControl(new BMap.NavigationControl());
    }
    
    document.getElementById('address').onkeydown = function (evt){
        evt = evt || event;
        if (evt.keyCode == 13) {
            doSearch();
        }
    };
    
    window.onload=function()
    {
    	init();
    	map.setCurrentCity(document.getElementById("city").value); 
    	window.focus();
    	document.getElementById("content").value=document.getElementById("city").value;
    	__updateinfowindow();
    }

	function __button_ok_onclick()
	{
		var r=location.pathname.replace("baidumap.htm","baidumapview.htm?point="+marker.point.lng + "," + marker.point.lat+"&zoom="+map.getZoom()+"&city="+escape(document.getElementById("city").value)+"&content="+escape(document.getElementById("content").value));
		window.opener.pasteHTML("<iframe src=\""+r+"\" style=\"width:"+(map.getSize().width+2)+"px;height:"+(map.getSize().height+2)+"px;\" frameborder=\"0\" scrolling=\"no\"></iframe>")
		window.close();
	}
	
	function __updateinfowindow()
	{
		if(document.getElementById("content").value!="")
		{
			var infoWindow = new BMap.InfoWindow(document.getElementById("content").value);  // 创建信息窗口对象
			marker.openInfoWindow(infoWindow);
		}
	}
	
	function __changemapsize(__this)
	{

		document.getElementById("container").style.width=__this.value.split(",")[0]+"px";
		document.getElementById("container").style.height=__this.value.split(",")[1]+"px";
	}
	
	var myCl = new BMapLib.CityList({container : "citylist_container", map : map});
	 
	// 给城市点击时，添加相关操作
	myCl.addEventListener("cityclick", function(e) {
		// 修改当前城市显示
		document.getElementById("curCity").innerHTML = e.name;
	 	document.getElementById("city").value=e.name;
		// 点击后隐藏城市列表
		
		document.getElementById("cityList").style.display = "none";
		doSearch();
    	document.getElementById("content").value=document.getElementById("city").value;
    	__updateinfowindow();

	});
	 
	// 给“更换城市”链接添加点击操作
	document.getElementById("curCityText").onclick = function() {
		var cl = document.getElementById("cityList");
		if (cl.style.display == "none") {
			cl.style.display = "";
		} else {
			cl.style.display = "none";
		}	
	};
	 
	// 给城市列表上的关闭按钮添加点击操作
	document.getElementById("popup_close").onclick = function() {
		var cl = document.getElementById("cityList");
		if (cl.style.display == "none") {
			cl.style.display = "";
		} else {
			cl.style.display = "none";
		}	
	};
</script>


 
</body>
</html>

